<template>
  <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-divider orientation="left"> 使用单选项为记录标记颜色 </a-divider>
    <a-form-model-item label="字段">
      <a-select
        v-model="option.field"
        allowClear
        placeholder="请选择字段"
        @change="displayTypeChange"
      >
        <a-select-option
          v-for="sitem in field.filter((f) => ['eradio'].includes(f.type))"
          :key="sitem.key"
          :value="sitem.key"
          >{{ sitem.label }}</a-select-option
        >
      </a-select>
    </a-form-model-item>

    <a-form-model-item label="显示项" v-if="option.field">
      <a-select v-model="option.displayType" @change="displayTypeChange">
        <a-select-option value="all">全部</a-select-option>
        <a-select-option value="appoint">显示指定项</a-select-option>
      </a-select>

      <a-select
        v-if="option.displayType == 'appoint'"
        placeholder="请选择指定项"
        mode="multiple"
        allowClear
        v-model="option.display"
        show-search
      >
        <a-select-option
          v-for="sitem in display"
          :key="sitem.value"
          :value="sitem.value"
        >
          <span
            class="eip-color-btn"
            :style="{ 'background-color': sitem.color }"
          >
            {{ sitem.label }}
          </span>
        </a-select-option>
      </a-select>
    </a-form-model-item>

    <a-form-model-item label="显示方式">
      <div class="viewColor">
        <span class="type-0" @click="option.showType = 0"
          >Aa
          <a-icon
            v-if="option.showType == 0"
            theme="filled"
            type="check-circle"
            class="selected" /></span
        ><span class="type-1" @click="option.showType = 1"
          >Aa
          <a-icon
            v-if="option.showType == 1"
            theme="filled"
            type="check-circle"
            class="selected"
          />
        </span>
        <span class="type-2" @click="option.showType = 2"
          >Aa
          <a-icon
            v-if="option.showType == 2"
            theme="filled"
            type="check-circle"
            class="selected"
        /></span>
      </div>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      blockSyle: {
        display: "block",
        height: "30px",
        lineHeight: "30px",
      },
      display: [],
    };
  },
  props: {
    option: {
      type: Object,
    },
    field: {
      type: Array,
    },
  },
  created() {
    this.displayTypeChange();
  },
  methods: {
    displayTypeChange() {
      if (this.option.displayType == "appoint" && this.option.field) {
        let o = this.$utils.find(this.field, (f) => f.key == this.option.field);
        this.display = o.options.options;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.viewColor > span.type-0 {
  border: 1px solid rgb(234, 234, 234);
}

.viewColor > span {
  position: relative;
  display: inline-flex;
  border-radius: 3px;
  margin-right: 16px;
  width: 78px;
  height: 36px;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  font-size: 14px;
  color: rgb(51, 51, 51);
  font-weight: bold;
  cursor: pointer;
}
.viewColor > span.type-1 {
  background: rgb(255, 232, 232);
}
.viewColor > span.type-2 {
  background: rgb(255, 232, 232);
}
.viewColor > span.type-1::before {
  position: absolute;
  content: "";
  width: 4px;
  left: 0px;
  top: 0px;
  bottom: 0px;
  background: rgb(245, 34, 34);
  border-radius: 3px;
}
.viewColor > span .selected {
  position: absolute;
  color: rgb(245, 34, 34);
  font-size: 18px;
  right: -9px;
  top: -9px;
  border-radius: 18px;
  background: rgb(255, 255, 255);
}
.viewColor > span.type-0::before {
  position: absolute;
  content: "";
  width: 4px;
  left: 0px;
  top: 0px;
  bottom: 0px;
  background: rgb(245, 34, 34);
  border-radius: 3px;
}
/deep/ .ant-select-selection--multiple .ant-select-selection__choice {
  padding: 0 20px 0 0px !important;
  border-radius: 18px !important;
}
</style>
